<template>
    <div class="content">
        <div class="content-block ">
            <div class="list-block">
                <ul>
                    <li>
                        <config name="服务地址" icon="icon-globe" key="address" :value="address"></config>
                    </li>

                    <li>
                        <config name="服务端口" icon="icon-exchange" key="port" :value="port"></config>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media">
                                <i class="icon icon-spinner"> </i>
                            </div>
                            <div class="item-inner">
                                <div class="item-title label">
                                    <div class="textCenter"> 网络超时</div>
                                </div>
                                <div class="item-input">
                                    <select v-model="timeout">
                                        <option value="1">1s</option>
                                        <option value="3">3s</option>
                                        <option value="5">5s</option>
                                        <option value="10">10s</option>
                                        <option value="15">15</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-random"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">
                                    <div class="textCenter">模拟数据</div>
                                </div>
                                <div class="item-input">
                                    <label class="label-switch" >
                                        <input type="checkbox" v-model="mock">
                                        <div class="checkbox"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</template>
<style>
    .label-switch input[type=checkbox]:checked + .checkbox {
        background: #0894EC !important;
    }

    .textCenter {
        margin: 0 auto;
        text-align: center;
    }
</style>
<script>
    import * as FStorage from '../util/FStorage'
    import Config from './configEditor.vue'

    export default{
        components: {Config},
        computed: {
            mock: {
                set: function (value) {
                    FStorage.setLocalItem('mock', value);
                },
                get: function () {
                    return FStorage.getLocalItem('mock');
                }
            },
            timeout: {
                set: function (value) {
                    FStorage.setLocalItem('timeout', value);
                },
                get: function () {
                    var timeout = FStorage.getLocalItem('timeout')
                    if (!timeout) {
                        timeout = 3
                        FStorage.setLocalItem('timeout', '3');
                    }
                    return timeout;
                }
            },
            address: function () {
                return FStorage.getLocalItem('address')
            },
            port: function () {
                return FStorage.getLocalItem('port')
            }
        },
    }
</script>
